<template>
	<view class="volunteerCorps">
		<view class="volunteerCorpsClass p-3">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		showImage
	} from '../../api/common.js'
	import request from '../../api/index.js'
	const data = ref()
	const getData = () => {
		request({
			url: '/api/contenthub/information-databas/selectInformationByLocation',
			method: 'GET',
			data: {
				displayLocation: 2
			}

		}, e => {
			if (e.success) {
				console.log('e-------data------', e.data)
				// 获取目标 DOM 元素
				const container = document.getElementsByClassName('volunteerCorpsClass')[0];

				// 解析 HTML 字符串
				const parser = new DOMParser();
				const doc = parser.parseFromString(e.data[0].describe, 'text/html');

				console.log("doc=======", doc.body);
				// 使用正则表达式匹配并提取所需部分
				const regex = /http:\/\/localhost:5173\/api\/file\/view\/(.+)/;

				const images = doc.body.querySelectorAll('img');

				images?.forEach(img => {
					const matchResult = img.src.match(regex);
					if (matchResult && matchResult[1]) {
						const extractedPart = matchResult[1];
						console.log(extractedPart); // 输出：c5da8643-fa39-4d08-bdf0-339b1588c503.png
						img.src = showImage(extractedPart)
					}


					console.log(img.src); // 输出每一个 img 元素

				});

				const url = 'http://localhost:5173/api/file/view/c5da8643-fa39-4d08-bdf0-339b1588c503.png';



				console.log("doc.body------",doc.body)

				// 将解析后的 DOM 节点插入到目标 DOM 元素中
				if (!doc?.body?.textContent) {
					doc.body = '暂无数据'
					return;

				}
				container.appendChild(doc?.body);


			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'none'
				})
			}
		})
	}
	onMounted(() => {
		getData();
	})
</script>

<style lang="scss" scoped>
	.volunteerCorps {
		// background-color: #f5f5f5;

		.title {
			background-color: #fff;
		}

		.content1,
		.content2,
		.content3 {
			background-color: #fff;
			line-height: 60rpx;
		}
	}

	.img {
		width: 100%;
	}
</style>